<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: 23377
  Date: 2021/12/14
  Time: 20:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <link href="${APP_PATH}/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="${APP_PATH}/static/js/jQuert-min-3.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        #box{
            width: 450px;
            height: 400px;
            border: 1px solid #E2E3E5;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -185px;
            margin-top: -200px;
        }
        #logo{
            width: 370px;
            height: 95px;
            font-size: 30px;
            color: #676A6C;
            line-height: 95px;
            margin-left: 40px;
        }
        #username{
            width: 295px;
            height: 50px;
            margin-left: 40px;
        }
        #password{
            width: 295px;
            height: 50px;
            margin-left: 40px;
        }
        .input-group{
            margin-left: 40px;
        }
        #captchaImage {
            width: 95px;
            height: 30px;
            margin-top: 15px;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            z-index: 3;
            left: 10px;
            top: 0;
        }
        #validateCode {
            height: 55px;
            padding-left: 120px;
            width: 295px;
        }
        #verify{
            width: 295px;
            height: 60px;
            margin-left: 40px;
            border: 1px solid #EDEDEE;
        }
        #btn-login{
            width: 295px;
            height: 50px;
            margin-left: 40px;
            margin-top: 20px;
        }
        #remember{
            width: 80px;
            height: 20px;
            margin-left: 150px;
            margin-top: 20px;
            color: #676A6C;
            font-size: 15px;
        }
        #s_username{
            float:right;
            margin-top: 15px;
        }
        #s_password{
            float:right;
            margin-top: 20px;
        }
        #s_validateCode{
            float:right;
            margin-top: 28px;
        }
    </style>
    <script type="text/javascript">
        <%--点击验证码图片生成新的验证码--%>
        $(function () {
            //time表示时间戳，可以防止缓存，确保每次生成不同的验证码
            $("#captchaImage").click(function(){
                //$("#captchaImage").attr("src", "user/captcha?time=" + (new Date()).valueOf());
                this.src = "${pageContext.request.contextPath}/user/captcha?time="+new Date().getTime();
            });
        });
        window.onload = function () {
            //给表单绑定onsubmit事件
            document.getElementById("registerFrom").onsubmit = function () {
                return checkUsername() && checkPassword()
            }

            //给用户名和密码框、Email、姓名、手机号分别绑定离焦事件
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
            // document.getElementById("validateCode").onblur = checkCode;
        }


        //校验用户名
        function checkUsername(){
            //获取用户名的值
            var username = document.getElementById("username").value;
            //定义正则表达式
            var reg_username=/^([a-zA-Z0-9_-])/;
            //判断值是否符合正则表达式，进行前端校验
            var flag=reg_username.test(username);
            //提示信息
            var s_username=document.getElementById("s_username");
            if (flag){
                //提示边框后提示绿色打勾
                s_username.innerHTML="<img src='${pageContext.request.contextPath}/img/gou.png' width='35px' height='25px'>";
            }else {
                //提示红色出错信息
                s_username.innerHTML="用户格式错误，请重新输入";
            }
            return flag;
        }
        function checkPassword(){
            //获取用户名的值
            var password = document.getElementById("password").value;
            //定义正则表达式
            var reg_password=/^\w{6,12}$/;
            //判断值是否符合正则表达式，进行前端校验
            var flag=reg_password.test(password);
            //提示信息
            var s_password=document.getElementById("s_password");
            if (flag){
                //提示边框后提示绿色打勾
                s_password.innerHTML="<img src='${pageContext.request.contextPath}/img/gou.png' width='35px' height='25px'>";
            }else {
                //提示红色出错信息
                s_password.innerHTML="密码格式错误，请重新输入";

            }
            return flag;
        }
    </script>
<%--    --%>

</head>
<body>
<%
    String message="";
    String msg= (String) request.getSession().getAttribute("validateCode");
    if (msg!=null){
        message=msg;
        System.out.println(message);
    }
%>
<canvas class="particle"></canvas>
<div id="box">
    <div id="logo">欢迎登录！</div>
    <div id="info">
<form method="post"  action="${pageContext.request.contextPath}/user/loginUser" id="registerFrom">
    <div style="color: red;"><span id="s_username" class="error"></span></div>
        <input type="text" class="form-control" id="username" name="username" placeholder="账号">
    <div style="color: red;"><span id="s_password" class="error"></span></div>
        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
    <div style="color: red;"><span id="s_validateCode" class="error"></span></div>
    <div class="input-group">
        <u>
            <input type="text" class="form-control" id="validateCode" name="validateCode" placeholder="验证码">
        </u>
        <img src="${pageContext.request.contextPath}/user/captcha?time=<%=new Date().getTime() %>" id="captchaImage" title="获取验证码" />
    </div>

    <div id="remember">记住登录<input type="checkbox"></div>

    <button class="btn btn-info" id="btn-login" onclick="VerifyLogin()">登录</button>
</form>
    </div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
